<template>
  <div class="applicate" v-loading="loading">
    <div class="applicate-head">
        <div class="applicate-title">应用入口</div>
        <div class="applicate-more" @click="dialogVisible=true">更多 >></div>
      </div>
      <div class="applicate-body" >
        <div class="applicate-item" v-for="item in applicateArr.slice(0,8)" @click="openApplicate(item.loginUrl)">
          <div class="applicate-img"><img :src="item.logo96 || item.logo64" alt=""></div>
          <div class="applicate-title">{{ item.name }}</div>
        </div>
        <div class="empty-text"  v-if="isEmpty">暂无数据</div>
      </div>

      <el-dialog custom-class="custom-dialog"
        title="全部应用"
        :visible.sync="dialogVisible"
        width="11rem">
      <div class="dialog-body dialog-applicate-body">
        <div class="dialog-applicate-ul">
          <div class="dialog-applicate-li" v-for="item in applicateArr" @click="openApplicate(item.loginUrl)">
            <div class="dialog-applicate-img"><img :src="item.logo96 || item.logo64" alt=""></div>
            <div class="dialog-applicate-title">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { getApplicatApi } from '../api/myHome'
export default {
  name: '',
  mixins: [],
  components: {
  },
  props: {
  },
  data () {
    return {
      sid: this._sid,
      dialogVisible: false,
      applicateArr: [],
      isEmpty: false,
      loading: false
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getApplicatFn()
  },
  methods: {
    getApplicatFn() {
      this.loading = true
      getApplicatApi(this.sid).then( res => {
        if(res.result == 'ok') {
          this.applicateArr = res.data
          this.isEmpty = this.applicateArr.length < 1
        }else {
          this.applicateArr = []
        }
        this.loading = false
      })
    },
    openApplicate(url) {
      window.open(url)
    }
  }
}
</script>

<style scoped lang="scss">
 @import "../style/common.scss";
 .applicate {
    box-shadow: 0rem 0rem 0.1rem #ebebeb;
    margin-top: 0.32rem;
    padding: 0.3rem 0.32rem;
    background-color: #fafbfd;
    border-radius: $radius2;
    .applicate-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0.4rem;
      .applicate-title {
        font-size: $small-size;
        font-weight: bold;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          height: 0.06rem;
          left: 25%;
          right: 25%;
          bottom: -0.15rem;
          background-color: #2c64df;
          border-radius: 0.2rem;
        }
      }
      .applicate-more {
        cursor: pointer;
        color: #5181e6;
        font-size: $min-size;
        i {
          color: #5181e6;
        }
      }
    }
    .applicate-body {
      display: flex;
      overflow: hidden;
      // height: 0.8rem;
      .applicate-item {
        cursor: pointer;
        margin-right: 0.3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        &:after {
          content: "";
          position: absolute;
          height: 1rem;
          width: $line-size;
          background-color: #ededed;
          top: 15%;
          bottom: 15%;
          right: -0.15rem;
        }
        &:last-child:after {
          background-color: transparent;
        }
        .applicate-img {
          width: 1rem;
          height: 0.8rem;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 0.6rem;
          }
        }
        .applicate-title {
          font-size: $small-size;
          text-align: left;
          align-items: center;
          width: 1.5rem;
          line-height: 160%;
        }
      }
    }
  }

  .dialog-applicate-body {
    min-height: 4rem;
    .dialog-applicate-ul {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 0.3rem;
      padding: 0.1rem 0 0.25rem 0;
      .dialog-applicate-li {
        text-align: left;
        cursor: pointer;
        margin-right: 0.3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin-right: 0.2rem;
        margin-bottom: 0.2rem;
        overflow: hidden;
        &:nth-child(4n) {
          margin-right: 0;
        }
        .dialog-applicate-img {
          width: 1rem;
          height: 0.8rem;
          display: flex;
          align-items: center;
          img {
            // width: 0.6rem;
            max-width: 70%; /* 图片宽度不超过容器宽度 */
            max-height: 70%; /* 图片高度不超过容器高度 */
          }
        }
        .dialog-applicate-title {
          font-size: $small-size;
          text-align: left;
          align-items: center;
          width: 1.3rem;
          line-height: 160%;
        }
      }
    }
  }
  </style>
